﻿@using PNProject.EF
@model IEnumerable<PNProject.EF.Product>
@{
    ViewBag.Title = "Slider";
    Layout = null;
    bool lang = (bool)(ViewData["lang"]);
    string langText = lang ? "" : "en-US/";
}
<div class="pronew">
    <div class="sliderpro">
        <div class="jcarousel-skin-tango">
            <div class="jcarousel-container jcarousel-container-horizontal">
                <div class="jcarousel-clip jcarousel-clip-horizontal">
                    <ul id="mycarousel" class="jcarousel-list jcarousel-list-horizontal">
@foreach (var item in Model)
{
    <li class="pnclass">
        <input type="hidden" value="@item.Slogan" />
        <div class="picpro">
            <table cellspacing="0" cellpadding="0" width="100%"><tbody><tr><td class="pic_2">
                <a href="/@string.Concat(langText,"productdetails/index/",item.ProductID.ToString(),"?&catelogid=",item.CategoryID.ToString())"><img src="@item.Avatar" alt=""/></a>
            </td></tr></tbody></table>
        </div>
        <p>@item.Name</p>
    </li>
}
</ul>
                                    </div>
                                    <div class="jcarousel-prev jcarousel-prev-horizontal">
                                    </div>
                                    <div class="jcarousel-next jcarousel-next-horizontal">
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
<div id="ppopup" style="position:absolute; display:none; width:180px; font-weight:bold; color:#333; min-height:10px; padding:10px; overflow:hidden; background-color:Orange; top:400px; left:400px; z-index:10000"></div>
@*<script src="/Scripts/jquery-1.5.1.js" type="text/javascript"></script>*@
<script type="text/javascript">
    jQuery(document).ready(function () {
        jQuery('#mycarousel').jcarousel({
            wrap: "circular",
            auto: 3,
            scroll: 1,
            visible: 3,
            initCallback: initCallbackFx
        });
    });

    jQuery(document).ready(function () {
        jQuery('#mycarousel-1').jcarousel({
            wrap: "circular",
            vertical: true,
            scroll: 1,
            auto: 3,
            initCallback: initCallbackFx
        });
    })

    jQuery(document).ready(function () {
        jQuery('#mycarousel-2').jcarousel({
            wrap: "circular",
            vertical: true,
            scroll: 1,
            auto: 3,
            initCallback: initCallbackFx
        });
    })

    function initCallbackFx(carousel, obejctli, liindex, listate) {
        $("#mycarousel li").mouseenter(function (event) {
            carousel.stopAuto();

            
            var target = event.target;
            var xclass = $(target).attr("class");
            while (xclass.indexOf("pnclass") < 0) {
                target = $(target).parent();
                xclass = $(target).attr("class");
                if (xclass == undefined)
                    xclass = "";
            }
            var text = $(target).find("input").val();
            if (text != "" && text != undefined) {
                $(ppopup).css("display", "block");
                $(ppopup).empty();
                $(ppopup).append(text);
                $(ppopup).css("left", $(target).offset().left + "px");
                var h = $(ppopup).css("height");
                var numh = h.substr(0, h.length - 2);
                $(ppopup).css("top", $(target).offset().top - numh - 20 + "px");
            }


        }).mouseleave(function () {
            carousel.startAuto();
            $(ppopup).css("display", "none");
        });
    }
</script>